﻿var map;
var desiredSteps = new Array(); //global array
var pathSteps = new Array() // a global array that contains all steps gotten from google direction service including start and destination
//var categoryString = null;
var radius = 5000; //global variable
var messageElement = null;
var categoryArray = new Array(); // global. An array that contains all category objects
var categoryName = [] // global array that contains all active category names ex. ['spa','restarunat']
var places = new Array(); // a global array that contains all places related to all categories.
var activeCategories = new Array(); //a global array that contains the active categories ex ['cafe','campground','lodging']
//var somethingChanged = false;
var startLatLng  //geocoded value of start address 
var endLatLng	//geocoded value of start address
var loader = $("<img />").attr('src', 'images/spinner.gif');

	
$(function(){

/*************************** Declaring global variables  ***************************************/		

	
	plot();
	//loadScript();
	var categories= [];
  
  // Here we receive the category object from the html and convert them to category objects
  // each object will be stored in the cateogryArray.
	$("#category-list > li").each(function(){
		var id = $(this).attr('id').substr($(this).attr('id').indexOf('-')+1);
		var classString = $(this).attr('class');
		var name = classString.substring(classString.indexOf('-')+1,classString.indexOf(' '));
		var color =  $(this).css('color');
		categoryArray[id] = new Category(color,'inactive',name, id);
	});

	$("#search").click(function(){
		$('#toppstopp-list').html(loader);
		removePlaces();
		calcRoute();	
	});

/******************************Triggering the search click event when 'to' input field is selected and the enter is pressed *****************************************************/

	$('#to').keypress(function(e) {
	  /* Enter pressed*/
	  if (e.keyCode == 13) {
	   $("#search").click(); 
	  }
	});
	
/********************************************************************************************************************/
	
  $("#category-list > li").click(function(){
  
	map.clearMarkers();
	$('#toppstopp-list').html(loader);
	//getActiveCategories();
	//if (categoryArray[index] == null ) {
    var index = $(this).attr('id').substr($(this).attr('id').indexOf('-')+1);
    if(categoryArray[index].status =='inactive') {
			activeCategories.push(categoryArray[index].name);
			switch (index) {
				case '1':
					categoryArray[index].getPlacesFromGgl();	
					break;
				case '2':
					//categoryArray[index].getPlacesFromDb();	
					break;
				case '3':
					categoryArray[index].getPlacesFromGgl();	
					break;
				default:
					categoryArray[index].getPlacesFromGgl();	
			}
    }
    else {
		console.debug(activeCategories);
		removePlaces(categoryArray[index].name);
		//categoryArray[index].hideMarkers();
		//categoryArray[index].hidePlaces();
    }
	
   categoryArray[index].changeStatus();
  });
  
 
/*************************** Jquery UI slide bar ***************************************/

	$( "#slider" ).slider({
		value:5,
		min: 5,
		max: 50,
		step: 5,
		slide: function( event, ui ) {
			$( "#amount" ).val(ui.value + "km" );
			radius =  ui.value * 1000;
			$('#toppstopp-list').html(loader);
			activeCategories = [];
			removePlaces();
			getDesiredSteps();
			for(var i=1; i<categoryArray.length; i++) {
			  if (categoryArray[i].status == 'active') {
				 categoryArray[i].status = 'inactive';
				 var elementId = '#category-' + categoryArray[i].id;
				 $(elementId).click();
			  }
			}
      
			$("#result").html(messageElement);
		}
	});
	$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "km" );
		

$('#ts-list').accordion({ 
    active: false, 
    header: '.head', 
    navigation: true, 
    event: 'click', 
    fillSpace: true, 
    animated: 'easeslide' 
});



});
